<template>
  <PageWrapper v-loading="loading" loading-tip="加载中...">
    <div class="p-4 p-4-tag">
      <div class="tag">
        <!-- 卡片显示区域 -->
        <div class="top-1st">
          <ul class="card-ul">
            <li class="li-item color-red">
              <span class="li-text">紧急</span>
              <span class="li-emp-40"></span>
              <span class="li-value">{{ deviceAlarmsData.SeriousCount || 0 }}</span>
            </li>
            <li class="li-item color-orange">
              <span class="li-text">严重</span>
              <span class="li-emp-40"></span>
              <span class="li-value">{{ deviceAlarmsData.MajorCount || 0 }}</span>
            </li>
            <li class="li-item color-yellow">
              <span class="li-text">一般</span>
              <span class="li-emp-40"></span>
              <span class="li-value">{{ deviceAlarmsData.GeneralCount || 0 }}</span>
            </li>
            <li class="li-item color-yellgren">
              <span class="li-text">轻微</span>
              <span class="li-emp-40"></span>
              <span class="li-value">{{ deviceAlarmsData.MinorCount || 0 }}</span>
            </li>
            <li class="li-item color-green">
              <span class="li-text">提示</span>
              <span class="li-emp-40"></span>
              <span class="li-value">{{ deviceAlarmsData.InfoCount || 0 }}</span>
            </li>
          </ul>
        </div>
        <div class="top-2nd">
          <ul class="card-ul">
            <li class="li-item color-blue">
              <span class="li-text">开启状态</span>
              <span class="li-emp-150"></span>
              <span class="li-value">{{ deviceAlarmsData.ActivateCount || 0 }}</span>
            </li>
            <li class="li-item color-green">
              <span class="li-text">关闭状态</span>
              <span class="li-emp-150"></span>
              <span class="li-value">{{ deviceAlarmsData.CloseCount || 0 }}</span>
            </li>
          </ul>
        </div>
        <!-- 中间 -->
        <div class="center">
          <Card title="设备报警总数_Top10" size="small" class="center-left">
            <!-- 柱状图 -->
            <policeBarchart
              :loading="loadingBydeviceAlarms"
              :seriesVal="seriesValBydeviceAlarms"
              height="280px"
            />
          </Card>
          <Card title="报警类型占比分析" size="small" style="width: 42%">
            <!-- 饼状图 -->
            <policePiechart
              :loading="loadingBydeviceType"
              :seriesVal="seriesValBydeviceType"
              height="280px"
            />
          </Card>
        </div>
        <!-- 底部 -->
        <div class="buttom">
          <Card title="最新报警实时看板" size="small" class="center-left">
            <div class="scroll-table">
              <table
                border="1"
                cellspacing="0"
                @mouseover="handleMouseOver"
                @mouseout="handleMouseOut"
              >
                <thead>
                  <tr>
                    <th>报警设备</th>
                    <th>报警设备编号</th>
                    <th>报警主题</th>
                    <th>报警时间</th>
                    <th>严重性</th>
                    <th>类别</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody ref="middleTableRef">
                  <tr v-for="(row, rIdx) in tableData" :key="rIdx">
                    <td class="text-center">{{ row['DeviceName'] }}</td>
                    <td class="text-center">{{ row['AssetCode'] }}</td>
                    <td class="text-center">{{ row['AlarmTopic'] }}</td>
                    <td class="text-center">{{ row['TriggerTime'] }}</td>
                    <td class="text-center">{{ row['AlarmLevel_text'] }}</td>
                    <td class="text-center">{{ row['AlarmType_text'] }}</td>
                    <td
                      class="text-center"
                      :class="row['AlarmStatus_text'] === '开启' ? 'green' : ''"
                      >{{ row['AlarmStatus_text'] }}</td
                    >
                    <td class="text-center link" @click="openFormModal(row)">详情</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </Card>
          <Card title="报警类别_Top10" size="small" style="width: 42%">
            <!-- 雷达图 -->
            <policeRadarchart
              :loading="loadingBydeviceTypeTOP"
              :seriesVal="seriesValBydeviceTypeTOP"
              height="280px"
            />
          </Card>
        </div>
      </div>
      <!-- 报警实时详情弹窗 -->
      <modelByAlarmdetail
        class="model"
        :info="groupForm"
        @register="register"
        @submit-success="closeModal"
      />
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { ref, onMounted, onBeforeUnmount, reactive, nextTick } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import policeBarchart from '/@/views/project/alertRules/components/policeBarchart.vue';
  import policePiechart from '/@/views/project/alertRules/components/policePiechart.vue';
  import policeRadarchart from '/@/views/project/alertRules/components/policeRadarchart.vue';
  import modelByAlarmdetail from '/@/views/project/alertRules/components/modelByAlarmdetail.vue';
  import {
    getalarmrecordhomestatis,
    getdevicealarmstatis,
    getalarmtypestatis,
    getalarmrecorddasboard,
    getalarmrecorddetail,
  } from '/@/api/alertRules/index';
  import { autoScroll } from '/@/views/project/alertRules/components/vScaleScreen';

  // 倒计时
  let timer = null;
  let loading = ref(false);
  let deviceAlarmsData = ref<any>({});
  //设备报警总数柱状图
  let loadingBydeviceAlarms = ref(false);
  let seriesValBydeviceAlarms = reactive({
    Xdata: [],
    seriesValue: [],
  });
  //报警列表占比图
  let loadingBydeviceType = ref(false);
  let seriesValBydeviceType = reactive({
    Xdata: [] as any,
    seriesValue: [] as any,
  });
  //报警列表top雷达图
  let loadingBydeviceTypeTOP = ref(false);
  let seriesValBydeviceTypeTOP = reactive({
    Xdata: [],
    seriesValue: [],
  });
  //报警实时看板
  let tableData = ref([]);
  //列表滚动
  let middleTableRef = ref();
  let middleScroll = ref();
  //详情弹窗
  let groupForm = reactive({
    data: {},
  });
  const [register, { openModal, closeModal }] = useModal();

  //获取设备报警统计信息
  async function getDeviceAlarmsInfo() {
    loading.value = true;
    loadingBydeviceType.value = true;
    try {
      let res = await getalarmrecordhomestatis([]);
      deviceAlarmsData.value = res || {};
      //设备类型占比
      let _Xdata = ['提示','轻微','一般', '严重', '紧急',];
      let _seriesValue = [
        { name: '提示', value: res.InfoCount || 0, selected: true },
        { name: '轻微', value: res.MinorCount || 0, selected: true },
        { name: '一般', value: res.GeneralCount || 0, selected: true },
        { name: '严重', value: res.MajorCount || 0, selected: true },
        { name: '紧急', value: res.SeriousCount || 0, selected: true },
      ];
      seriesValBydeviceType.Xdata = _Xdata;
      seriesValBydeviceType.seriesValue = _seriesValue;
      loading.value = false;
      loadingBydeviceType.value = false;
    } catch (err) {
      loading.value = false;
      loadingBydeviceType.value = false;
    }
  }
  //获取设备报警总数
  async function getDeviceAlarmsTotl() {
    loadingBydeviceAlarms.value = true;
    try {
      let res = await getdevicealarmstatis([]);
      let arr = Array.isArray(res) ? res : [];
      let _Xdata = [] as any;
      let _Ydata = [] as any;
      if (arr.length > 0) {
        arr.forEach((item, index) => {
          _Xdata.push(item.Code ? item.Code : '');
          _Ydata.push(item.Count ? item.Count : 0);
        });
        seriesValBydeviceAlarms.Xdata = _Xdata;
        seriesValBydeviceAlarms.seriesValue = _Ydata;
      }
      loadingBydeviceAlarms.value = false;
    } catch (error) {
      loadingBydeviceAlarms.value = false;
    }
  }
  //获取报警类别TOP10
  async function getDeviceTypeTOP() {
    loadingBydeviceTypeTOP.value = true;
    try {
      let res = await getalarmtypestatis([]);
      let arr = Array.isArray(res) ? res : [];
      let _Xdata = [] as any;
      let _seriesValue = [] as any;
      if (arr.length > 0) {
        let max = arr[0].Count;
        arr.forEach((item, index) => {
          _Xdata.push({
            name: item.Name,
            max: max,
            min: 0,
          });
          _seriesValue.push(item.Count);
        });
        seriesValBydeviceTypeTOP.Xdata = _Xdata;
        seriesValBydeviceTypeTOP.seriesValue = _seriesValue;
      }

      loadingBydeviceTypeTOP.value = false;
    } catch (error) {
      loadingBydeviceTypeTOP.value = false;
    }
  }
  //获取报警实时看板
  async function getRealTimeAlarm() {
    tableData.value = [];
    try {
      let res = await getalarmrecorddasboard([]);
      tableData.value = res || [];
    } catch (error) {
      tableData.value = [];
    }
  }
  //table鼠标移入事件
  function handleMouseOver() {
    middleScroll.value.stop();
  }
  //table鼠标移出事件
  function handleMouseOut() {
    middleScroll.value.start();
  }
  //列表详情点击
  async function openFormModal(row) {
    try {
      let res = await getalarmrecorddetail([row.Id]);
      if (res) {
        groupForm.data = res;
        openModal();
      }
    } catch (error) {}
  }

  onMounted(async () => {
    getDeviceAlarmsInfo();
    getDeviceAlarmsTotl();
    getDeviceTypeTOP();
    getRealTimeAlarm();
    nextTick(() => {
      middleScroll.value = autoScroll(middleTableRef.value);
      middleScroll.value.start();
    });
    timer = setInterval(() => {
      getDeviceAlarmsInfo();
      getDeviceAlarmsTotl();
      getDeviceTypeTOP();
      getRealTimeAlarm();
    }, 15000);
  });
  // 页面销毁之前，清除定时器和滚动
  onBeforeUnmount(() => {
    middleScroll.value && middleScroll.value.stop();
    if (timer) clearInterval(timer);
    // setObjectLocalStorage('localDataByMemory', { xDataByMemory, dataByMemory });
    // setObjectLocalStorage('localDataByCpu', { xDataByCpu, dataByCpu });
  });
</script>

<style scoped lang="less">
  .p-4-tag {
    padding: 8px;
    width: 100%;
    height: 100%;

    .tag {
      background-color: #fff;
      padding: 0 6px;
      padding-top: 25px;

      > .top-1st {
        .li-text {
          font-size: 19px;
          font-weight: 700;
        }

        .li-emp-40 {
          width: 40px;
        }

        .li-value {
          font-size: 28px;
          font-weight: 700;
        }
      }

      > .top-2nd {
        margin-top: 15px;

        .card-ul li {
          height: 45px;
          float: left;
          width: 18%;
          margin-right: 20px;
          display: flex;
          flex: 1;
          color: #fff;
        }

        .card-ul li:last-child {
          margin-right: 0;
        }

        .li-text {
          font-size: 20px;
          font-weight: 700;
        }

        .li-emp-150 {
          width: 150px;
        }

        .li-value {
          font-size: 32px;
          font-weight: 700;
        }
      }

      > .center {
        margin-top: 15px;
        display: flex;
        flex-direction: row;
      }

      > .buttom {
        margin-top: 15px;
        height: 380px;
        display: flex;
        flex-direction: row;

        .scroll-table {
          height: 380px;
          overflow: hidden;
        }
      }
    }

    .card-ul {
      display: flex;
      margin-bottom: 0;
    }

    .card-ul li {
      height: 80px;
      float: left;
      width: 18%;
      margin-right: 20px;
      display: flex;
      flex: 1;
      color: #fff;
    }

    .card-ul li:last-child {
      margin-right: 0;
    }

    .color-red {
      background-color: #fa3534;
    }

    .color-green {
      background-color: #99cc33;
    }

    .color-yellow {
      background-color: #ffcc00;
    }

    .color-orange {
      background-color: #ff6600;
    }

    .color-yellgren {
      background-color: #cccc00;
    }

    .color-blue {
      background-color: #66ccff;
    }

    .li-item {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .center-left {
      width: 58%;
      margin-right: 8px;
    }

    table {
      width: 100%;
      height: calc(100% - 100px);
      font-size: 14px;
      overflow: hidden;
      display: block;
      font-weight: normal;
      table-layout: fixed;
      border-collapse: collapse;
      // border: 2px solid rgb(17, 96, 120);
      thead {
        width: 100%;
        height: 20px;
        display: table;
        table-layout: fixed;
        background: #fafafa;

        th {
          padding: 5px 0;
          font-weight: normal;
          // border: 2px solid rgb(17, 96, 120);
        }
      }

      tbody {
        width: 100%;
        height: calc(100% - 20px);
        display: block;
        overflow-y: auto;
        background: #fff;

        tr {
          width: 100%;
          display: table;
          table-layout: fixed;

          td {
            padding: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            border: 1px solid #e5e7eb;
          }
        }

        tr:nth-child(even) {
          background-color: #fafafa;
        }
      }
    }

    .link {
      cursor: pointer;
      color: #409eff;
    }

    .green {
      color: #67c23a;
    }
  }

  ::v-deep(.ant-modal) {
    width: 900px !important;
  }
</style>
